<template>
	<view class="uniAnswer">
		<view class="avatar flex alignCenter justConBetween" @click="toDetail">
			<view class="flex alignCenter">
				<view class="quesAva">
					<image :src="answerItemOne.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
					<!-- <view class="focus" v-if="!answerItemOne.isLikedUser" @click.stop="focusClick">+</view> -->
				</view>
				<view class="">
					<view class="font14 bold">{{answerItemOne.createUserName || '匿名回答者'}}</view>
					<view class="colorccc font12">{{answerItemOne.createTime}}</view>
				</view>
				<!-- <image class="best" src="@/static/image/icons/best.png" mode="widthFix"></image> -->
			</view>
			<view class="focus font12" v-if="(!answerItemOne.stateField.isLikedUser && !isMine)" @click.stop="focusClick"><text class="focusMargin">+</text>关注</view>
		</view>
		<view class="ansCon">
			<view class="richBox">
				<view class="richSelf">
					<view class="ansTxt font14 color666">{{answerItemOne.content}}</view>
					<view class="" v-if="answerItemOne.imgUrl">
						<uni-imgbox :canDel="false" :imgArr="answerItemOne.imgUrl.split(',')"></uni-imgbox>
					</view>
					<view class="videoBox" v-if="answerItemOne.videoUrl">
						<video controls :src="answerItemOne.videoUrl" :poster="answerItemOne.videoUrl+'?x-oss-process=video/snapshot,t_1000,m_fast'"></video>
					</view>
				</view>
				<!-- <view class="seeDetail font14 colorMain"><text class="bold font12">查看详情</text></view> -->
			</view>
			<!-- <view class="richBox" v-if="answerItemOne.type==1">
				<rich-text :nodes="answerItemOne.goodNodes"></rich-text>
				<view class="seeDetail font14 colorMain"><text class="bold font12">查看详情</text></view>
			</view> -->
			<view class="audioBox" v-if="answerItemOne.audioUrl">
				<audio controls :name="answerItemOne.createUserName" :author="answerItemOne.updateTime" :poster="answerItemOne.createUserAvatar" :src="answerItemOne.audioUrl"></audio>
			</view>
			
		</view>
		<view class="flex alignCenter account justConBetween font12 colorccc">
			<view class="accNum flex alignCenter">
				<view class="flex alignCenter" @click.stop="answerOper('like')">
					<image :src="answerItemOne.isLiked?'https://image.alhelp.net/uploads/20231104/c9f5e3a3e5ed54bfb52cb4acaff6245d.png':'https://image.alhelp.net/uploads/20231104/718c395eb3db60582c396acec8a85fc6.png'" mode="widthFix"></image>
					<text class="mathMagrin">{{answerItemOne.likedTotal}}</text>
				</view>
				<view class="flex alignCenter" @click.stop="answerOper('col')">
					<image :src="answerItemOne.stateField.isCollection?'https://image.alhelp.net/uploads/20231104/3c6d28a15ae27e959809fba3b6ca9242.png':'https://image.alhelp.net/uploads/20231104/d1b0e9462ce1d5a2e67b90dcd0a48225.png'" mode="widthFix"></image>
					<text class="mathMagrin">{{answerItemOne.stateField.collectionTotal}}</text>
				</view>
			</view>
			<view class="noWidthBtn font12" v-if="canChooseBest" @click.stop="chooseBest">择为最佳</view>
			<!-- <view class="noWidthBtn">
				<uni-icons type="checkmarkempty" size="15"></uni-icons>
				<text class="chooseBtn">选择</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import { bestAnswer,operAboutHot } from "@/api/school.js"
	import { likeOrNot,focusUser } from "@/api/index.js"
	export default {
		name:"uni-answer",
		props:{
			answerItem:{
				type:Object,
				default(){
					return {}
				}
			},
			quesId:{
				type:[String,Number],
				default:''
			},
			quesTitle:{
				type:String,
				default:'回答详情'
			},
			quesBounty:{
				type:[String,Number],
				default:0
			},
			canChooseBest:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			answerItem: {
			    handler(newValue, oldValue) {
					this.answerItemOne=newValue
			    },
			    deep: true,
			    immediate: true
			}
		},
		data() {
			return {
				isMine:false,
				answerItemOne:''
			};
		},
		created() {
			this.isMine=(this.answerItemOne.createUserId==uni.getStorageSync('userId'))
		},
		methods:{
			toDetail(){
				console.log('去详情')
				// 清楚是否预览了图片的标识字段（有这个字段是为了解决）
				uni.removeStorageSync('previewImg')
				uni.navigateTo({
					url:`/pages/send/answer/answerDetail/answerDetail?id=${this.answerItemOne.id}&quesTitle=${this.quesTitle}`
				})
			},
			// 回答的操作
			answerOper(type){
				if(type=='like'){
					let param={
						type:2,//同提问的type一致
						typeId:this.answerItemOne.id,
						isLiked:!this.answerItemOne.isLiked
					}
					likeOrNot(param).then((res)=>{
						if(res.code==100000){
							this.answerItemOne.isLiked=!this.answerItemOne.isLiked
							if(this.answerItemOne.isLiked){
								this.answerItemOne.likedTotal=Number(this.answerItemOne.likedTotal)+1
								return
							}else{
								this.answerItemOne.likedTotal=Number(this.answerItemOne.likedTotal)-1
								return
							}
						}
					})
				}else if(type=='col'){
					// 收藏、稍后回答api
					let param={
						isAdd:!this.answerItemOne.stateField.isCollection,
						modelId:this.answerItemOne.id,
						modelType:2,//1提问 2回答 -2待回答
					}
					operAboutHot(param).then((res)=>{
						if(res.code==100000){
							this.answerItemOne.stateField.isCollection=!this.answerItemOne.stateField.isCollection
							if(this.answerItemOne.stateField.isCollection){
								this.answerItemOne.stateField.collectionTotal=Number(this.answerItemOne.stateField.collectionTotal)+1
								return
							}else{
								this.answerItemOne.stateField.collectionTotal=Number(this.answerItemOne.stateField.collectionTotal)-1
								return
							}
						}
					})
				}
			},
			// 选择为最佳
			chooseBest(){
				let showTxt=''
				if(this.quesBounty>0){
					showTxt='最佳回答一经选择将无法修改，若提问包含赏金，赏金将直接给到该用户，是否继续？'
				}else{
					showTxt='最佳回答一经选择将无法修改，是否选定该回答为最佳回答？'
				}
				uni.showModal({
					title: '提示',
					content: showTxt,
					success:(res)=> {
						if (res.confirm) {
							if(this.quesBounty>0){
								this.$emit('chooseBestSucc',this.answerItemOne.id)
							}else{
								// 没有赏金直接选为最佳回答
								let param={
									questionId:this.quesId,
									answerId:this.answerItemOne.id
								}
								bestAnswer(param).then((res)=>{
									if(res.code==100000){
										this.$emit('chooseBestSucc')
									}
								})
							}
						} else if (res.cancel) {}
					}
				});
			},
			focusClick(){
				if(this.answerItemOne.createUserId==uni.getStorageSync('userId')){
					uni.showToast({
						title:'亲，这是你自己哦',
						icon:'none'
					})
					return
				}
				let param={
					isAdd:!this.answerItemOne.stateField.isLikedUser,
					fansUserId:this.answerItemOne.createUserId,
					fansUserName:this.answerItemOne.createUserName,
					fansUserAvatar:this.answerItemOne.createUserAvatar,
				}
				focusUser(param).then((res)=>{
					if(res.code==100000){
						this.answerItemOne.stateField.isLikedUser=!this.answerItemOne.stateField.isLikedUser
						let emitObj={
							type:'focus',
							userId:this.answerItemOne.createUserId,
							status:this.answerItemOne.stateField.isLikedUser
						}
						this.$emit('answerOper',emitObj)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.uniAnswer{
	border-bottom: 1px solid $bordercolor;
	padding: 0 0 30rpx;
}
.avatar{
	margin: 40rpx 0 20rpx;
	.quesAva{
		width:60rpx;
		height:60rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
		position: relative;
		image{
			border-radius: 50%;
			width:100%;
			height:100%;
		}
		.focus{
			position: absolute;
			bottom: -10rpx;
			left: 15%;
			width: 70%;
			background: $colorred;
			border-radius: 20rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			color: #fff;
			z-index: 10;
		}
	}
	.best{
		width: 80rpx;
		height: 80rpx;
		vertical-align: middle;
	}
	// 与头像水平对齐的关注样式
	.focus{
		background: $colorred;
		color: #fff;
		padding:8rpx 20rpx;
		border-radius: 40rpx;
		text-align: center;
	}
}
.richBox{
	
	overflow: hidden;
	margin: 0 0 20rpx;
	position: relative;
	
	.richSelf{
		// filter: blur(2px);
		max-height: 300rpx;
	}
	.seeDetail{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.1);
		text-align: center;
		line-height: 100rpx;
		text{
			border-radius: 40rpx;
			background: rgba(0, 0, 0, .3);
			padding: 8rpx 30rpx;
		}
	}
	.ansTxt{
		margin:0 0 20rpx;
	}
}
.audioBox{
	max-height: 400rpx;
	audio{
		width: 100%;
	}
	::v-deep .uni-audio-default{
		width: 100%;
	}
}
.videoBox{
	max-height: 400rpx;
	video{
		width: 100%;
		height: 200rpx;
	}
}
.ansCon{
	margin:0 0 50rpx;
}
.account{
	.accNum{
		// text{
		// 	display: inline-block;
		// 	margin:0 30rpx 0 0;
		// }
		&>view{
			margin-right:24rpx;
		}
		image{
			width: 40rpx;
			height: 40rpx;
			margin-right: 5rpx;
		}
	}
}

.noWidthBtn{
	padding: 12rpx 20rpx;
	.chooseBtn{
		display: inline-block;
		margin-left: 5rpx;
	}
}
</style>